<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:j="http://tags"
                xmlns:p="http://primefaces.org/ui"
                template="/facelets/templateMenu.xhtml">
    <ui:define name="head">
        <title>e-Home - Grupos de Ações</title>
    </ui:define>

    <ui:define name="body">
        <h:form id="frmAcaoGrupo">
            <p:remoteCommand id="cmdNovoAcaoGrupo"
                             name="novoAcaoGrupo"
                             actionListener="#{acaoGrupoController.novo()}"
                             update="pnlAcaoGrupoTitulo, pnlAcaoGrupoDados"
                             oncomplete="$('#modal-acaoGrupo').modal('show'); return false;"/>

            <p:remoteCommand id="cmdAlterarAcaoGrupo"
                             name="alterarAcaoGrupo"
                             update="pnlAcaoGrupoTitulo, pnlAcaoGrupoDados"
                             actionListener="#{acaoGrupoController.alterar()}"
                             oncomplete="$('#modal-acaoGrupo').modal('show'); return false;"/>

            <p:remoteCommand id="cmdExcluirAcaoGrupo"
                             name="excluirAcaoGrupo"
                             update="lblAcaoGrupoExcluir"
                             actionListener="#{acaoGrupoController.excluir()}"
                             oncomplete="$('#modal-acaoGrupo-excluir').modal('show'); return false;"/>

            <p:remoteCommand id="cmdConfirmarExclusaoAcaoGrupo"
                             name="confirmarExclusaoAcaoGrupo"
                             update="dtbAcaoGrupo"
                             actionListener="#{acaoGrupoController.confirmarExclusao()}"
                             oncomplete="$('#modal-acaoGrupo-excluir').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdCancelarExclusaoAcaoGrupo"
                             name="cancelarExclusaoAcaoGrupo"
                             onstart="$('#modal-acaoGrupo-excluir').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdSalvarAcaoGrupo"
                             name="salvarAcaoGrupo"
                             update="dtbAcaoGrupo"
                             actionListener="#{acaoGrupoController.salvar()}"
                             oncomplete="$('#modal-acaoGrupo').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdCancelarAcaoGrupo"
                             name="cancelarAcaoGrupo"
                             onstart="$('#modal-acaoGrupo').modal('hide'); return false;"/>

            <div id="modal-acaoGrupo" class="modal hide fade">
                <div class="modal-header">
                    <p:outputPanel id="pnlAcaoGrupoTitulo">
                        <h:panelGrid columns="2" cellpadding="5">
                            <p:graphicImage value="/resources/img/#{(acaoGrupoController.operacao == consUtilController.operacaoNOVO) ? 'actionAdd' : (acaoGrupoController.operacao == consUtilController.operacaoALTERAR) ? 'actionEdit' : 'action'}.png" />
                            <h3 id="modal-title">#{(acaoGrupoController.operacao == consUtilController.operacaoNOVO) ? 'Novo Grupo de Ações' : (acaoGrupoController.operacao == consUtilController.operacaoALTERAR) ? 'Alterar Grupo de Ações' : 'Grupo de Ações'}</h3>
                        </h:panelGrid>
                    </p:outputPanel>
                </div>
                <div class="modal-body">
                    <p class="center" id="modal-content">
                        <h:panelGrid columns="2" cellpadding="5" cellspacing="5" id="pnlAcaoGrupoDados" style="width: 500px;">
                            <h:outputLabel value="Nome:"
                                           style="font-weight: bold; text-align: right;"/>
                            <p:outputPanel styleClass="input-prepend">
                                <span class="add-on"><i class="icon-font"></i></span>
                                <h:inputText id="txtAcaoDescricao"
                                             value="#{acaoGrupoController.acaoGrupoSelecionado.agrNome}"
                                             class="input-block-level"
                                             style="width: 100%;"/>
                            </p:outputPanel>
                            <h:outputLabel value="Ativo:"
                                           style="font-weight: bold; text-align: right;"/>
                            <j:booleanButton id="ativo"
                                             value="#{acaoGrupoController.acaoGrupoSelecionado.agrAtivo}"
                                             update=":frmAcaoGrupo:pnlAcaoGrupoDados"/>
                        </h:panelGrid>
                    </p>
                </div>
                <div class="modal-footer">
                    <button id="btnSalvarAcaoGrupo"
                            type="button"
                            class="btn btn-primary"
                            onclick="salvarAcaoGrupo();">
                        <i class="icon-ok icon-white"></i>
                        Salvar
                    </button>

                    <button id="btnCancelarAcaoGrupo"
                            type="button"
                            class="btn"
                            onclick="cancelarAcaoGrupo();">
                        <i class="icon-remove"></i>
                        Cancelar
                    </button>
                </div>
            </div>

            <div id="modal-acaoGrupo-excluir" class="modal hide fade">
                <div class="modal-header">
                    <h:panelGrid columns="2" cellpadding="5">
                        <p:graphicImage value="/resources/img/actionRem.png" />
                        <h3 id="modal-title">Excluir Ação</h3>
                    </h:panelGrid>
                </div>
                <div class="modal-body">
                    <p class="center" id="modal-content">
                        <p:outputLabel id="lblAcaoGrupoExcluir"
                                       value="Deseja realmente excluir o ação #{acaoGrupoController.acaoGrupoSelecionado.agrNome}?"/>
                    </p>
                </div>
                <div class="modal-footer">
                    <button id="btnConfirmarExclusao"
                            type="button"
                            class="btn btn-danger"
                            onclick="confirmarExclusaoAcaoGrupo();">
                        <i class="icon-trash icon-white"></i>
                        Excluir
                    </button>

                    <button id="btnCancelarExclusao"
                            type="button"
                            class="btn"
                            onclick="cancelarExclusaoAcaoGrupo();">
                        <i class="icon-remove"></i>
                        Não, espere!
                    </button>
                </div>
            </div>

            <div class="page-header">
                <h:panelGrid columns="2" cellpadding="5">
                    <p:graphicImage value="/resources/img/action.png" />
                    <h1>Grupos de Ações</h1>
                </h:panelGrid>

                <button id="btnNovoAcaoGrupo"
                        type="button"
                        class="btn btn-primary"
                        onclick="novoAcaoGrupo();">
                    <i class="icon-plus icon-white"></i>
                    Novo
                </button>
            </div>

            <p:dataTable id="dtbAcaoGrupo"
                         value="#{acaoGrupoController.acoes}"
                         filteredValue="#{acaoGrupoController.acoesFiltrados}"
                         rowKey="#{acaoGrupo.agrCodigo}"
                         filterEvent="enter"
                         var="acaoGrupo"
                         emptyMessage="Nenhum grupo de ações encontrado.">

                <p:column id="colDescricao"
                          headerText="Grupo"
                          filterBy="#{acaoGrupo.agrNome}"
                          filterMatchMode="contains"
                          sortBy="#{acaoGrupo.agrNome}"
                          style="text-align: center;">
                    #{acaoGrupo.agrNome}
                </p:column>

                <p:column id="colAtivo"
                          headerText="Ativo"
                          filterBy="#{acaoGrupo.agrAtivoDesc}"
                          filterMatchMode="contains"
                          sortBy="#{acaoGrupo.agrAtivoDesc}"
                          style="text-align: center; width: 70px;">
                    #{acaoGrupo.agrAtivoDesc}
                </p:column>

                <p:column id="colAcoes"
                          style="text-align: center; width: 100px;">
                    <button id="btnAlterarAcaoGrupo"
                            type="button"
                            class="btn"
                            onclick="alterarAcaoGrupo([{name: 'agrCodigo', value: #{acaoGrupo.agrCodigo}}]);"
                            style="margin-right: 2px;">
                        <i class="icon-pencil"></i>

                    </button>
                    <button id="btnExcluirAcaoGrupo"
                            type="button"
                            class="btn btn-danger"
                            onclick="excluirAcaoGrupo([{name: 'agrCodigo', value: #{acaoGrupo.agrCodigo}}]);">
                        <i class="icon-trash icon-white"></i>

                    </button>
                </p:column>
            </p:dataTable>
        </h:form>
    </ui:define>
</ui:composition>